<style type="text/css">{literal}
ul.notlist, ol.notlist, .notlist dt, .notlist dd, .notlist li
{ list-style:none; margin:0; padding:0; display:block; overflow:hidden; float:left;/*width:100%;*/ }
.notlist li:first-child { margin-left:0; }
.notlist li { float:left; width:90px; margin-left:3px; }

ul.pagemenu { border-bottom:3px solid #fdcb03; }
ul.pagemenu li { width:95px; }
ul.pagemenu li a { display:block; background:#96C4F5; color:#fff; text-align:center; vertical-align:center; font-size:12px; text-decoration:none; line-height:27px; }
ul.pagemenu li a:hover { background:#fc0; font-weight:bold; color:#96C4F5; text-decoration:none; }
ul.pagemenu li.selected a { background:#fc0; font-weight:bold; }
ul.pagemenu li.selected a:hover { color:white; }
</style>{/literal}

<div style="height:0;overflow:hidden;clear:both;" /></div>

<style>{literal}
div.form, div.form input { color:#000; }
div.form { width:100%; }
div.form input { font-size: 1.2em; margin:0.2em 0; text-align:center; width:235px; }
div.form a { color:#000; font-size: 1.1em; text-decoration:none; border-bottom:1px solid; }
div.form a:hover { color:#14ABC1; }
div.form.register { margin:0;width:100%; }
div.form.register input { font-size:1.2em;text-align:left;width:90% }
div.form.register label { font-size:1.2em;display:inline-block; }
div.form.register table td { vertical-align:top; }
div.form.register td.info { font-weight:bold; color:#922; }
div.form.register td.info i { font-style:normal; color:#9a1; }
div.form.register td.info b { color:#4b4; }
div.form div#myLoginSelector { position:absolute; width:120px; background:#ffd; border:1px solid #ddb; padding:1px 4px; }
div.form input.profile-birthday{width: 58px;}
img.avatar { position:absolute; }
{/literal}</style>

<h2>Ваши данные</h2>
<form id="profile" action="/ajax/auth/editprofile/" method="post">
<div id="profileBlock" class="form">
<table width="100%">
<tbody>
<tr>
	<td width="25%"><label for="myName">Ваc зовут</label></td>
	<td width="40%"><input id="myName" type="text" value="{$name|default:''}" name="i[name]" /></td>
	<td valign="top" class="info" id="myNameInfo" rowspan="2"> </td>
</tr>
<tr><td><label for="mySurname"></label></td><td><input id="mySurname" type="text" value="{$surname|default:''}" name="i[surname]" /></td></tr>
<tr><td><label for="myBirthdayD">День рождения</label></td>
	<td>
		<input id="myBirthdayD" class="profile-birthday" size="5" type="text" value="{$day|default:'ДД'}" name="i[day]" />
		<input id="myBirthdayM" class="profile-birthday" size="5" type="text" value="{$month|default:'ММ'}" name="i[month]" />
		<input id="myBirthdayY" style="width:102px;" type="text" value="{$year|default:'ГГГГ'}" name="i[year]" />
	</td>
</tr>
<tr><td><label for="myCity">Город</label></td><td><input id="myCity" type="text" value="{$city|default:''}" name="i[city]" /></td></tr>
<tr><td>&nbsp;</td><td><input id="myProfileSubmit" type="submit" style="text-align:center" value="Сохранить данные" /></td></tr>
</tbody></table>
</div>
</form>

<h2>Фотография</h2>
<form id="avatar" action="/ajax/auth/editavatar/" method="post" enctype="multipart/form-data">
<div id="avatarBlock" class="form">
{*php}var_dump($this ->_tpl_vars){/php*}
<table width="100%">
<tbody>
<tr>
	<td width="25%"><label for="myAvatar">Новая</label></td>
	<td width="40%"><input id="myAvatar" type="file" value="{$name|default:''}" name="fileField" /></td>
	<td rowspan="2" valign="top" id="myAvatarInfo" class="info"><img id="myAvatarView" class="avatar" src="{render t='config://web/avatar' user=$id size=0}" /></td></tr>
	<td width="25%"><label for="myAvatarDel">Удалить</label></td>
	<td width="40%"><input id="myAvatarDel" type="checkbox" value="yes" name="delField" /></td>
<tr><td>&nbsp;</td><td><input id="myAvatarSubmit" type="submit" style="text-align:center" value="Сохранить данные" /> &nbsp; <a class="jsbutton"></a></td></tr>
</tbody></table>
</div>
</form>
<br/><br/>

<h2>Смена пароля</h2>
<form id="passwords" action="/ajax/auth/editpassword/" method="post">
<div id="passwordsBlock" class="form">
<table width="100%">
<tbody>
<tr class="state3"><td width="25%"><label for="myPassword0">Старый пароль</td><td width="40%"><input id="myPassword0" type="password" value="" name="i[password0]" /></td><td id="myPassword0Info" class="info"></td></tr>
<tr class="state3"><td><label for="myPassword">Новый пароль</td><td><input id="myPassword" type="password" value="" name="i[password]" /></td><td id="myPasswordInfo" class="info"></td></tr>
<tr class="state3"><td><label for="myPassword2">Еще раз новый пароль</td><td><input id="myPassword2" type="password" value="" name="i[password2]" /></td><td id="myPassword2Info" class="info"></td></tr>
<tr class="state3"><td>&nbsp;</td><td colspan="2">Пароль должен состоять не менее чем из 6-ти символов и не может совпадать с логином.</td></tr>
<tr><td>&nbsp;</td><td><input id="myPasswordSubmit" type="submit" style="text-align:center" value="Сменить пароль" /></td></tr>
</tbody></table>
</div>
</form>


<script>{literal}
var forms = { 'code': '{/literal}{$code|default:''}{literal}' };
var profileForm = {
	init: function( ) {
		this.i = {};
		this.v = {};
		this.b = {};
		this.v.name = $('myName');
		this.v.surname = $('mySurname');
		this.v.city = $('myCity');
		this.i.namei = $('myNameInfo');
		this.v.day = $('myBirthdayD');
		this.v.month = $('myBirthdayM');
		this.v.year = $('myBirthdayY');
		
		this.v.name.addEvents({'change':profileForm.onNameChange});
		this.v.surname.addEvents({'change':profileForm.onNameChange});
		this.v.city.addEvents({'change':profileForm.checkCity});
		
		this.form = $('profile');
		this.form.addEvent('submit',function(e){
			e.stop();
			profileForm.signup();
		});
		
		this.unfreezeForm();

		debug( 'profile initialized' );
	},

	freezeForm: function( ) { $each(this.form.elements, function(el){el.disabled=true;el.setStyle('color','#777');} ); },
	unfreezeForm: function( ) { $each(this.form.elements, function(el){el.disabled=false;el.setStyle('color','');} ); var s=this.form.getElements('[type=submit]')[0]; s.disabled=true;s.setStyle('color','#777'); (function(){s.disabled=false;s.setStyle('color','');}).delay(3000); },

	onNameChange: function(e) {
		profileForm.i.namei.innerHTML = profileForm.checkName( );
	},
	checkName: function( b ) {
		var n = profileForm.getName(), s = profileForm.getSurname( );
		if( n == '' || s == '' ) return b?false:'Нужно, чтобы у Вас в системе было имя.';
		if( (n.length + s.length) < 6 )
			return b?false:'к сожалению, мы не верим, что Вас зовут '+n+' '+s;
		return b?true:'<b>очень приятно, '+n+' :-)</b>';
	},
	getName: function( )
	{
		var n=this.v.name.value.replace(/[^a-zа-я ]/ig,'').trim();
		if( n.length < 2 ) return '';
		return n[0].toUpperCase()+n.substr(1).toLowerCase();
	},
	getSurname: function( )
	{
		var s=this.v.surname.value.replace(/[^a-zа-я ]/ig,'').trim();
		if( s.length < 2 ) return '';
		return s[0].toUpperCase()+s.substr(1).toLowerCase();
	},
	checkCity: function( )
	{
		var c=this.v.city.value.replace(/[^a-zа-я ]/ig,'').trim();
		if( c == '')
		{
			alert('Вы не ввели город');
			return false;
		}
		else
		{	if( c.length < 3 )
			{
				alert('Мы не верим, что Вы  живете в '+c);
				return false;
			}
		}
		return true;
	},
	checkBirthday: function( )
	{
		var f = true;
		var y = this.v.year.value.replace(/[^0-9 ]/ig,'').trim();
		var _Date =  new Date;
		if( y.length != 4 || y < 1910 || y > (_Date.getYear() + 1895))
		{
			this.v.year.value = 'ГГГГ';
			alert('Неправильно введен год.');
			f = false;
		}
		else
		{
			var m = this.v.month.value.replace(/[^0-9 ]/ig,'').trim();
			if( m.length != 2 || m < 1 || m > 12)
			{
				this.v.month.value = 'MM';
				alert('Неправильно введен месяц.');
				f = false;
			}
			else
			{			
				var d = this.v.day.value.replace(/[^0-9 ]/ig,'').trim();
				if( d.length != 2 || d < 1 || d > 31)
				{
					this.v.day.value = 'ДД';
					alert('Неправильно введен день.');
					f = false;
				}
				else
				{
					var m30 = ['04', '06', '09', '11'];
					
					if(m30.contains(m))
					{
						if(d > 30)
						{
							this.v.day.value = 'ДД';
							alert('В выбраннам месяце 30 дней.');
							f = false;
						}
					}
					else
					{
						if(m == '02' && d > 29)
						{
							this.v.day.value = 'ДД';
							alert('В выбраннам месяце 28/29 дней.');
							f = false;
						}
					}
				}
			}
		}
		return f;
	},

	checkAll: function( ) {
		var r = 0;
		r += !profileForm.checkName( 1 );
		r += !profileForm.checkBirthday( );
		r += !profileForm.checkCity( );
		profileForm.i.namei.innerHTML = profileForm.checkName( );
		return !r;
	},
	
	signup: function( ) {
		this.freezeForm();
		if( !profileForm.checkAll( ))
		{
			alert( 'Для сохранения должны быть заполнены все поля.' );
			profileForm.unfreezeForm();
			return;
		}
		
		var data={}; for(var i in profileForm.v) data[i]=profileForm.v[i].value;
		data.code = forms.code;
		
		var t = function(responseJSON, responseText) {
			if( !responseJSON.result ) return;
			var r=responseJSON.result;
			if( r.hash ) forms.code = r.hash;
			alert( r.code == 200
				? 'Данные профиля успешно сохранены.'
				: 'Во время сохранения данных произошла ошибка.' );
		};
		
		(new Request.JSON({'url':'/ajax/auth/editprofile/','async':false,'onSuccess':t})).post({'data':data});
		
		this.unfreezeForm();
	}
}

var avatarForm = {
	init: function( ) {
		this.i = {};
		this.v = {};
		this.v.avatar = $('myAvatar');
		this.i.view = $('myAvatarView');
		this.i.avatari = $('myAvatarInfo');
		
		this.target = null;
		this.form = $('avatar');
		this.form.addEvent('submit',function(e){
			e.stop();
			avatarForm.signup();
		});
		
		debug( 'avatar initialized' );
	},
	
	freezeForm: function( ) { $each(avatarForm.form.elements, function(el){el.disabled=true;el.setStyle('color','#777');} ); },
	unfreezeForm: function( ) { $each(avatarForm.form.elements, function(el){el.disabled=false;el.setStyle('color','');} ); var s=avatarForm.form.getElements('[type=submit]')[0]; s.disabled=true;s.setStyle('color','#777'); (function(){s.disabled=false;s.setStyle('color','');}).delay(3000); },
	
	checkAll: function( ) {
		var r = 0;
		if( this.v.avatar.value == this.v.avatar.defaultValue ) r = 1;
		return !r;
	},
	
	attachTarget: function( ) {
		if( avatarForm.target ) return !!(avatarForm.form.target = avatarForm.target.id);
		
		document.body.adopt( avatarForm.target = new IFrame({
			'src': 'about:blank',
			'id': 'avatarTarget',
			'name': 'avatarTarget',
			'styles': { 'width': 1, 'height': 1, 'border': '1px solid gray', 'opacity': '0.5', 'position': 'fixed', 'top': 0, 'left': 0 },
			'events': { }
		}) );
		
		return arguments.callee( );
	},
	
	signup: function( ) {
//		avatarForm.freezeForm( );
		
		if( !avatarForm.checkAll( ) )
		{
			alert( 'Для изменения пароля необходимо заполнить все нужные поля.' );
//			avatarForm.unfreezeForm();
			return;
		}
		avatarForm.attachTarget( );
		
		avatarForm.target.onload = function(){
			//eval( "var result="+$(avatarForm.target.contentDocument.body).get('html') );
			avatarForm.v.avatar.value = '';
			// console.debug( result );
			avatarForm.i.view.set('src',avatarForm.i.view.get('src').replace(/^[^\/]|\.jpg.*$/,'')+'.jpg?'+(Math.round(Math.random()*89999)+10000));
		};
		
		avatarForm.form.submit();
		
		return;
		
		var data={}; for(var i in avatarForm.v) data[i]=avatarForm.v[i].value;
		data.code = forms.code;
		
		var t = function(responseJSON, responseText) {
			if( !responseJSON.result ) return;
			var r=responseJSON.result;
			if( r.hash ) forms.code = r.hash;
			alert( r.code == 200
				? 'Пароль изменен.'
				: 'Во время изменения пароля произошла ошибка.<br/><br/>Скорее всего, Вы неверно ввели старый пароль.' );
		};
		(new Request.JSON({'url':'/ajax/auth/editpassword/','async':false,'onSuccess':t})).post({'data':data});
		
		avatarForm.unfreezeForm();
	}
};

var passwordForm = {
	init: function( ) {
		this.i = {};
		this.v = {};
		this.v.password0 = $('myPassword0');
		this.i.password0i = $('myPassword0Info');
		this.v.password = $('myPassword');
		this.i.passwordi = $('myPasswordInfo');
		this.v.password2 = $('myPassword2');
		this.i.password2i = $('myPassword2Info');

		this.v.password0.addEvents({'keyup':passwordForm.onPassChange,'change':passwordForm.onPassChange});
		this.v.password.addEvents({'keyup':passwordForm.onPassChange,'change':passwordForm.onPassChange});
		this.v.password2.addEvents({'keyup':passwordForm.onPassChange,'change':passwordForm.onPassChange});
//checkPasswords
		
		this.form = $('passwords');
		this.form.addEvent('submit',function(e){
			e.stop();
			passwordForm.signup();
		});
		
		debug( 'passwords initialized' );
	},
	
	freezeForm: function( ) { $each(passwordForm.form.elements, function(el){el.disabled=true;el.setStyle('color','#777');} ); },
	unfreezeForm: function( ) { $each(passwordForm.form.elements, function(el){el.disabled=false;el.setStyle('color','');} ); var s=passwordForm.form.getElements('[type=submit]')[0]; s.disabled=true;s.setStyle('color','#777'); (function(){s.disabled=false;s.setStyle('color','');}).delay(3000); },
	
	onPassChange: function(e) {
		if( passwordForm.v.password.value == '' ) return;
		passwordForm.i.password0i.innerHTML = passwordForm.checkPass0( );
		passwordForm.i.passwordi.innerHTML = passwordForm.checkPass( );
		passwordForm.i.password2i.innerHTML = passwordForm.checkPass2( );
	},
	checkPass0: function( b ) {
		var pass = passwordForm.v.password0.value;
		if( pass.length < 6 ) return b?false:'Не указан Ваш старый пароль.';
		return b?true:'<b>Спасибо</b>';
	},
	checkPass: function( b ) {
		var pass = passwordForm.v.password.value;
		if( pass.length < 6 ) return b?false:'слишком короткий';
		if( pass.test(/[а-я]/i) ) return b?false:'пароль содержит русские буквы';
		var easy = pass.test(/123|qwe|asd|zxc|abc|qaz|йцу|фыв|ячс|йфя|абв/);
		var spec = pass.test(/!|@|#|\$|_|\)|\(|\\| /);
		var digits = pass.test(/[0-9]/);
		var alpha = pass.test(/[a-z]/);
		if( !spec && ( easy || (!alpha && digits)) ) return b?false:'слишком простой';
		if( !spec && alpha && !digits ) return b?true:'<i>хороший пароль</i>';
		if( spec && !alpha && digits ) return b?true:'<i>хороший пароль</i>';
		return b?true:'<b>надежный пароль</b>';
	},
	checkPass2: function( b ) {
		if( !passwordForm.checkPass( 1 ) || passwordForm.v.password2.value == '' ) { return b?false:''; }
		else {
			if( passwordForm.v.password2.value!=passwordForm.v.password.value ) return b?false:'пароли не совпадают';
			else return b?true:'<b>спасибо</b>';
		}
	},
	
	checkAll: function( ) {
		var r = 0;
		r += !passwordForm.checkPass0( 1 );	passwordForm.i.password0i.innerHTML = passwordForm.checkPass0( );
		r += !passwordForm.checkPass( 1 );	passwordForm.i.passwordi.innerHTML = passwordForm.checkPass( );
		r += !passwordForm.checkPass2( 1 );	passwordForm.i.password2i.innerHTML = passwordForm.checkPass2( );
		return !r;
	},
	
	signup: function( ) {
		passwordForm.freezeForm();
		if( !passwordForm.checkAll( ) )
		{
			alert( 'Для изменения пароля необходимо заполнить все нужные поля.' );
			passwordForm.unfreezeForm();
			return;
		}
		
		var data={}; for(var i in passwordForm.v) data[i]=passwordForm.v[i].value;
		data.code = forms.code;
		
		var t = function(responseJSON, responseText) {
			if( !responseJSON.result ) return;
			var r=responseJSON.result;
			if( r.hash ) forms.code = r.hash;
			alert( r.code == 200
				? 'Пароль изменен.'
				: 'Во время изменения пароля произошла ошибка.<br/><br/>Скорее всего, Вы неверно ввели старый пароль.' );
		};
		(new Request.JSON({'url':'/ajax/auth/editpassword/','async':false,'onSuccess':t})).post({'data':data});
		
		passwordForm.unfreezeForm();
	}
};
window.addEvent( 'domready', function(){
	profileForm.init();
	avatarForm.init();
	passwordForm.init();
});
</script>{/literal}